import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
import { Popover} from "antd-mobile";
const Item = Popover.Item;
class index extends Component {
  state = {
    visible: false,
    selected: "",
  };
  onSelect = (opt) => {
    this.setState({
      visible: true,
      selected: opt.props.value,
    });
    if(opt.props.value==="setting"){
      this.props.history.push('/setting')
    }
  };
  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };
    render() {
        return (
            <div>
                <Popover
                      mask
                      overlayClassName="fortest"
                      overlayStyle={{ color: "currentColor" }}
                      visible={this.state.visible}
                      overlay={[
                        <Item
                          key="4"
                          value="setting"
                          icon={
                            <svg className="icon" aria-hidden="true" style={{width:"20px",height:"20px"}}>
                            <use href="#icon-shezhi1"></use>
                            </svg>
                            }
                            onSelect={this.onSelect}
                            style={{width:"120px"}}
                        >
                          设置
                        </Item>,
                        <Item
                          key="5"
                          value="special"
                          icon={
                          <svg className="icon" style={{width:"18px",height:"18px"}}>
                          <use href="#icon-richscan_icon"></use>
                        </svg>}
                        style={{width:"120px"}}
                        >
                          扫一扫
                        </Item>,
                        <Item
                          key="6"
                          value="button ct"
                          icon={<svg className="icon" aria-hidden="true" style={{width:"20px",height:"20px"}}>
                          <use href="#icon-bangzhu"></use>
                        </svg>}
                        style={{width:"120px"}}
                        >
                          <span style={{ marginRight: 5 }}>帮助</span>
                        </Item>,
                      ]}
                      align={{
                        overflow: { adjustY: 0, adjustX: 0 },
                        offset: [-10, 0],
                      }}
                      onVisibleChange={this.handleVisibleChange}
                      onSelect={this.onSelect}
                    >
                      <div
                        style={{
                          height: "100%",
                          display: "flex",
                          alignItems: "center",
                        }}
                      >
                        <svg className="icon" aria-hidden="true">
                        <use href="#icon-shezhi"></use>
                      </svg>
                      </div>
                    </Popover>
                  

            </div>
        )
    }
}
export default withRouter(index)